'use client'
require('dotenv').config()
import React, {useEffect, useState} from 'react';
import Touritem from "@/app/components/TourItem/TourItem";
import axios from "axios";

export type TourlistProps = {}

export default function Tourlist({}: TourlistProps) {
    const baseUrl = process.env.BASE_URL
    const [tours_data, set_tours_data] = useState<any[]>([])
    const get_tours = async () => {
        try {
            const response = await axios.get(
                `${baseUrl}/api/tour/`, {
                    headers: {
                        Authorization: "Bearer your_permanent_token"
                    }
                })
            return await response.data

        } catch (e) {
            console.error(e)
        }
    }
    useEffect(() => {
        get_tours().then((data) => set_tours_data(data))
    }, [])
    console.log(tours_data)
    return (
        <div className={"flex mx-auto justify-center my-10"}>
            <div className={"flex"}>
                {tours_data.map((tour, index) => (
                    <Touritem
                        key={index}
                        id={tour["id"]}
                        name={tour["name"]}
                        description={tour["description"]}
                        price={tour["price"]}
                        src={tour["photo"]}
                    />
                ))}
            </div>
        </div>
    );
}
